<template>
	<el-container>
		<el-aside width="200px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="fileFolder" class="menu" node-key="folderId" :data="fileFolderList" :props="groupsProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
							 :filter-node-method="groupFilterNode" @node-click="groupClick">
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">{{ node.label }}</span>
								<span class="code">{{ data.code }}</span>
								<span class="do">
									<el-button-group>
										<el-button icon="el-icon-edit" size="small" @click.stop="publicFolderEdit(data)"></el-button>
										<el-button icon="el-icon-delete" size="small" @click.stop="publicFolderDel(node, data)"></el-button>
									</el-button-group>
								</span>
							</span>
						</template>

					</el-tree>
				</el-main>
				<el-footer style="height:51px;">
					<el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;" @click="addFileFolder">添加目录</el-button>
				</el-footer>
			</el-container>
		</el-aside>
		<el-container>
			<el-card shadow="never" :header="`权限设置`+(folderName!=''?'--【'+folderName+'】':'')" style="width:100%">
				<el-form :model="form" :rules="rules" :disabled="folderId==''" ref="dialogForm" label-width="100px" label-position="left">
				<el-tabs tab-position="top" type="card" @tab-change="tabChange">
					<el-tab-pane label="访问权限">
						<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
							<el-form-item label="人员权限" prop="accessUserRole">
								<select-user-dialog v-model:accountId="form.accessUserRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="部门权限" prop="accessDeptRole">
								<select-dept-dialog v-model:deptId="form.accessDeptRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="职务权限" prop="accessLevelRole">
								<select-user-level-dialog v-model:levelId="form.accessLevelRole" :mode="true"/>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="新建权限">
						<el-form label-width="100px" label-position="left">
							<el-form-item label="人员权限" prop="createUserRole">
								<select-user-dialog v-model:accountId="form.createUserRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="部门权限" prop="createDeptRole">
								<select-dept-dialog v-model:deptId="form.createDeptRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="职务权限" prop="createLevelRole">
								<select-user-level-dialog v-model:levelId="form.createLevelRole" :mode="true"/>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="下载权限">
						<el-form label-width="100px" label-position="left">
							<el-form-item label="人员权限" prop="downUserRole">
								<select-user-dialog v-model:accountId="form.downUserRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="部门权限" prop="downDeptRole">
								<select-dept-dialog v-model:deptId="form.downDeptRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="职务权限" prop="downLevelRole">
								<select-user-level-dialog v-model:levelId="form.downLevelRole" :mode="true"/>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="管理权限">
						<el-form label-width="100px" label-position="left">
							<el-form-item label="人员权限" prop="manageUserRole">
								<select-user-dialog v-model:accountId="form.manageUserRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="部门权限" prop="manageDeptRole">
								<select-dept-dialog v-model:deptId="form.manageDeptRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="职务权限" prop="manageLevelRole">
								<select-user-level-dialog v-model:levelId="form.manageLevelRole" :mode="true"/>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="批量设置" name="batch">
						<el-form label-width="100px" label-position="left">
								<el-form-item label="人员权限" prop="userRole">
									<select-user-dialog v-model:accountId="batchform.userRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="部门权限" prop="deptRole">
								<select-dept-dialog v-model:deptId="batchform.deptRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="职务权限" prop="levelRole">
								<select-user-level-dialog v-model:levelId="batchform.levelRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="选择范围" prop="range">
								<el-checkbox-group v-model="batchform.range">
									<el-checkbox-button label="1">访问权限</el-checkbox-button>
									<el-checkbox-button label="2">下载权限</el-checkbox-button>
									<el-checkbox-button label="3">管理权限</el-checkbox-button>
									<el-checkbox-button label="4">新建权限</el-checkbox-button>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item label="操作方式" prop="optType">
								<el-radio-group v-model="batchform.optType">
									<el-radio-button label="1">添加权限</el-radio-button>
									<el-radio-button label="2">移除权限</el-radio-button>
								</el-radio-group>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				</el-tabs>
				<div style="width: 100%;text-align: center;">
					<el-button  type="primary" :loading="isSaveing" @click="batchSubmit()" v-if="tabName=='batch'">保 存</el-button>

					<el-button  type="primary" :loading="isSaveing" @click="submit()" v-else>保 存</el-button>
				</div>
				</el-form>
			</el-card>
		</el-container>
	</el-container>
	<filefloderdialog v-if="dialog.save" ref="fileFolderDialog" @success="handleFolderSuccess" @closed="dialog.save=false"></filefloderdialog>
</template>
<script>

import filefloderdialog from "@/views/file/public/setting/filefloderdialog";
import selectUserDialog from "@/views/module/selectUserDialog";
import selectDeptDialog from "@/views/module/selectDeptDialog";
import selectUserLevelDialog from "@/views/module/selectUserLevelDialog";
export default {
	name: 'Public Folder Setting',
	components: {
		filefloderdialog,
		selectUserLevelDialog,
		selectUserDialog,
		selectDeptDialog,
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			folderId:'',
			folderName:'',
			isSaveing:false,
			showGrouploading: false,
			groupFilterText: '',
			fileFolderList: [],
			groupsProps: {
				label: "folderName",
				value: "folderId"
			},
			tabName:'',
			batchform:{
				folderId:'',
				userRole:'',
				deptRole:'',
				levelRole:'',
				optType:'1',
				range:[]
			},
			form:{
				folderId:'',
				accessUserRole:'',
				accessDeptRole:'',
				accessLevelRole:'',
				createUserRole:'',
				createDeptRole:'',
				createLevelRole:'',
				downUserRole:'',
				downDeptRole:'',
				downLevelRole:'',
				manageUserRole:'',
				manageDeptRole:'',
				manageLevelRole:''
			},
			rules:{

			}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.fileFolder.filter(val);
		}
	},
	mounted() {
		this.getPublicFileFolderGroup()
	},
	methods: {
		tabChange(name){
			this.tabName = name;
		},
		//加载树数据
		async getPublicFileFolderGroup() {
			this.showGrouploading = true;
			var res = await this.$API.file.publicFile.getPublicFileFolderTree.get();
			this.showGrouploading = false;
			this.fileFolderList = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			this.folderId = data.folderId
			this.batchform.folderId = data.folderId
			this.folderName = data.folderName;
			this.getPublicFileFolderById(this.folderId);
		},
		//本地更新数据
		async handleFolderSuccess(data) {
			var res = await this.$API.file.publicFile.getPublicFileFolderTree.get();
			if (res.code == 200) {
				this.fileFolderList = res.data;
			}
		},
		addFileFolder() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.fileFolderDialog.open()
			})
		},
		async getPublicFileFolderById(folderId)
		{
			var res = await this.$API.file.publicFile.getPublicFileFolderById.get({folderId: folderId});
			if (res.code == 200) {
				this.form = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		publicFolderEdit(data) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.fileFolderDialog.open("edit").setData(data)
			})
		},
		publicFolderDel(node, data) {
			this.$confirm(`确定删除 ${data.folderName} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				var res = await this.$API.file.publicFile.deletePublicFileFolder.post({folderId: data.folderId});
				if (res.code == 200) {
					this.$refs.fileFolder.remove(data.folderId)
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}

			}).catch(() => {

			})
		},
		async submit()
		{
			this.isSaveing = true;
			var res = await this.$API.file.publicFile.updatePublicFileFolder.post(this.form);
			this.isSaveing = false;
			if (res.code == 200) {
				this.visible = false;
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async batchSubmit()
		{
			var res;
			this.isSaveing = true;
			if(this.batchform.optType=="1")
			{
				res = await this.$API.file.publicFile.addPublicFolderRole.post(this.batchform);
			}else if(this.batchform.optType=="2")
			{
				res = await this.$API.file.publicFile.removePublicFolderRole.post(this.batchform);
			}
			this.isSaveing = false;
			if (res.code == 200) {
				this.visible = false;
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},

	}
}
</script>
<style scoped>
.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
</style>
